'use client';

import React from 'react';
import { Row, Col, Select, Input, Button, Space, Card } from 'antd';
import { SearchOutlined, ClearOutlined } from '@ant-design/icons';
import { TicketFilters as TicketFiltersType } from '@/types/ticket';
import { 
  TICKET_STATUS_OPTIONS, 
  TICKET_PRIORITY_OPTIONS, 
  TICKET_CATEGORY_OPTIONS,
  ASSIGNEE_OPTIONS 
} from '@/utils/constants';

const { Option } = Select;
const { Search } = Input;

interface TicketFiltersProps {
  filters: TicketFiltersType;
  onFiltersChange: (filters: TicketFiltersType) => void;
  loading: boolean;
}

const TicketFilters: React.FC<TicketFiltersProps> = ({
  filters,
  onFiltersChange,
  loading,
}) => {
  const handleStatusChange = (values: string[]) => {
    onFiltersChange({
      ...filters,
      status: values as any,
    });
  };

  const handlePriorityChange = (values: string[]) => {
    onFiltersChange({
      ...filters,
      priority: values as any,
    });
  };

  const handleCategoryChange = (values: string[]) => {
    onFiltersChange({
      ...filters,
      category: values as any,
    });
  };

  const handleAssigneeChange = (values: string[]) => {
    onFiltersChange({
      ...filters,
      assignee: values,
    });
  };

  const handleSearchChange = (value: string) => {
    onFiltersChange({
      ...filters,
      search: value || undefined,
    });
  };

  const handleClearFilters = () => {
    onFiltersChange({});
  };

  return (
    <Card className="filters-bar" style={{ marginBottom: 24 }}>
      <Row gutter={[16, 16]} align="middle">
        <Col xs={24} sm={12} md={6}>
          <div>
            <label style={{ display: 'block', marginBottom: 4, fontWeight: 500 }}>
              状态
            </label>
            <Select
              mode="multiple"
              placeholder="选择状态"
              value={filters.status}
              onChange={handleStatusChange}
              style={{ width: '100%' }}
              disabled={loading}
            >
              {TICKET_STATUS_OPTIONS.map(option => (
                <Option key={option.value} value={option.value}>
                  {option.label}
                </Option>
              ))}
            </Select>
          </div>
        </Col>

        <Col xs={24} sm={12} md={6}>
          <div>
            <label style={{ display: 'block', marginBottom: 4, fontWeight: 500 }}>
              优先级
            </label>
            <Select
              mode="multiple"
              placeholder="选择优先级"
              value={filters.priority}
              onChange={handlePriorityChange}
              style={{ width: '100%' }}
              disabled={loading}
            >
              {TICKET_PRIORITY_OPTIONS.map(option => (
                <Option key={option.value} value={option.value}>
                  {option.label}
                </Option>
              ))}
            </Select>
          </div>
        </Col>

        <Col xs={24} sm={12} md={6}>
          <div>
            <label style={{ display: 'block', marginBottom: 4, fontWeight: 500 }}>
              分类
            </label>
            <Select
              mode="multiple"
              placeholder="选择分类"
              value={filters.category}
              onChange={handleCategoryChange}
              style={{ width: '100%' }}
              disabled={loading}
            >
              {TICKET_CATEGORY_OPTIONS.map(option => (
                <Option key={option.value} value={option.value}>
                  {option.label}
                </Option>
              ))}
            </Select>
          </div>
        </Col>

        <Col xs={24} sm={12} md={6}>
          <div>
            <label style={{ display: 'block', marginBottom: 4, fontWeight: 500 }}>
              处理人
            </label>
            <Select
              mode="multiple"
              placeholder="选择处理人"
              value={filters.assignee}
              onChange={handleAssigneeChange}
              style={{ width: '100%' }}
              disabled={loading}
            >
              {ASSIGNEE_OPTIONS.map(assignee => (
                <Option key={assignee} value={assignee}>
                  {assignee}
                </Option>
              ))}
            </Select>
          </div>
        </Col>

        <Col xs={24} md={12}>
          <div>
            <label style={{ display: 'block', marginBottom: 4, fontWeight: 500 }}>
              搜索
            </label>
            <Search
              placeholder="搜索工单标题、描述或标签..."
              value={filters.search}
              onSearch={handleSearchChange}
              onChange={(e) => {
                if (!e.target.value) {
                  handleSearchChange('');
                }
              }}
              style={{ width: '100%' }}
              disabled={loading}
              enterButton={<SearchOutlined />}
            />
          </div>
        </Col>

        <Col xs={24} md={12}>
          <div style={{ display: 'flex', alignItems: 'flex-end', height: '100%' }}>
            <Button
              icon={<ClearOutlined />}
              onClick={handleClearFilters}
              disabled={loading}
              style={{ marginTop: 24 }}
            >
              清空筛选
            </Button>
          </div>
        </Col>
      </Row>
    </Card>
  );
};

export default TicketFilters; 